<template>
	<div class="header">
		<div class="logo"><img src="../assets/img/Mian/logo_.png" alt="" /></div>
		<div class="nav-list">
			<div class="main-nav-list">
				<a href="" class="nav-item">首页</a>
				<a href="" class="nav-item">写博客</a>
			</div>
			<div class="right-side-nav">
				<div class="search">
					<input type="text" class="search-input" placeholder="欢迎探索自由编程协会" />
					<img src="	https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/6401156ae5d55b2253b3d2351231f02c.svg" alt="" class="search-icon" />
				</div>
				<div class="add-group">
					<button class="add-bnt">创作者中心</button>
				</div>
				<div class="notification">
					<svg
						t="1641908176726"
						class="icon"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="957"
						width="23"
						height="23"
					>
						<path
							d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z"
							p-id="958"
							fill="#8a8a8a"
						></path>
					</svg>
				</div>
				<div class="menu">
					<img class="menu-img" src="	https://p9-passport.byteacctimg.com/img/user-avatar/bba44f823525b3eff5ccbbd27a4767ab~300x300.image" alt="" />
				</div>
			</div>
		</div>
	</div>
	<div class="nav">
		<div class="nav-main">
			<a href="">推荐</a>
			<a href="">关注</a><a href="">后端</a><a href="">前端</a><a href="">数据结构</a><a href="">项目经验</a><a href="">代码人生</a
			><a href="">阅读</a>
		</div>
	</div>
</template>

<script lang="ts">
export default {};
</script>

<style lang="scss" scoped>
.header {
	width: 100%;
	height: 3.75rem;
	position: fixed;
	top: 0;
	display: flex;
	font-size: 1.33rem;
	align-items: center;
	background: white;
	z-index: 999;
	.logo {
		margin-right: 1.5rem;
		margin-left: 1.5rem;
		display: inline-block;
		width: auto;
		margin-top: 0.3rem;
		img {
			height: 3.75rem;
		}
	}
	.nav-list {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		flex-direction: row-reverse;
		height: 100%;
		margin: 0;
		flex: 1 0 auto;
		.main-nav-list {
			display: flex;
			order: 99;
			.nav-item {
				text-decoration: none;
				color: #515767;
				position: relative;
				margin: 0 32px;
			}
		}
		.right-side-nav {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			position: relative;
			height: 100%;
			margin: 0;
			order: 0;
			.search {
				background-color: #f2f3f5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 4px;
				position: relative;
				height: 2.2rem;
				margin: 1rem;

				.search-input {
					border: none;
					width: 14rem;
					padding: 0.6rem 0.2rem 0.6rem 1rem;
					box-shadow: none;
					outline: none;
					font-size: 1.1rem;
					color: #666;
					background-color: transparent;
					transition: width 0.3s;
				}
				.search-icon {
					display: block;
					width: 1.33rem;
					margin-right: 0.2rem;
					cursor: pointer;
				}
			}

			.add-group {
				display: flex;
				align-items: center;
				position: relative;
				width: 115px;
				height: 2.2rem;
				margin: 0.5rem;
				.add-bnt {
					border-color: transparent;
					padding: 0 1rem;
					font-size: 1rem;
					height: 100%;
					color: #fff;
					background-color: #1e80ff;
					border-radius: 3px;
				}
				.add-bnt:hover {
					background-color: #0072e4;
				}
			}

			.notification {
				margin: 0.5rem;
			}
			.menu {
				width: 2.2rem;
				height: 2.2rem;
				margin: 0 3rem 0 0.7rem;
				.menu-img {
					border-radius: 50%;
					object-fit: cover;
					width: 2.2rem;
					height: 2.2rem;
				}
			}
		}
	}
}
.nav {
	border-top: 1px solid #e7e7e7;
	height: 2.8125rem;
	width: 100%;
	position: fixed;
	top: 3.75rem;
	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
	transition: all 0.2s;
	transform: translateZ(0);
	z-index: 999;
	background: white;
	// background-color: #ccc;
	.nav-main {
		max-width: 960px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		line-height: 1;

		// margin: ;
		a {
			margin: 0 1rem;
			font-size: 1.16rem;
			justify-content: center;
			align-items: center;
			text-decoration: none;
			color: #71777c;
		}
	}
}
</style>
